<template>
  <div class="contrain">
    <div class="head">
      <span>ID号注册</span>
    </div>
    <div class="main">
      <el-upload class="avatar-uploader"
                 :action="$upload"
                 :show-file-list="false"
                 :on-success="handleAvatarSuccess">
        <img v-if="userInfo.icon"
             :src="$upload+userInfo.icon"
             class="avatar">
        <img src="../../assets/undefined.jpg"
             v-else>
      </el-upload>
      <van-form @failed="onFailed">
        <van-field v-model="userInfo.uid"
                   label="ID号"
                   required
                   placeholder="请输入ID号"
                   :rules="[{ validator}]" />
        <van-field v-model="userInfo.password"
                   label="密码"
                   required
                   type="password"
                   placeholder="请输入密码"
                   :rules="[{ validator}]" />
        <van-field v-model="userInfo.confirm_password"
                   label="确认密码"
                   required
                   type="password"
                   placeholder="请确认密码"
                   :rules="[{ validator}]" />
        <van-field v-model="userInfo.email"
                   label="邮箱"
                   placeholder="请输入邮箱"
                   :rules="[{ validator:Emailvalidator, message:'请输入正确邮箱'}]" />
        <van-field v-model="Vcode"
                   label="验证码"
                   required
                   placeholder="请输入验证码"
                   :rules="[{ validator }]" />
        <div class=" Vcode">
          <s-identify :identifyCode="identifyCode"
                      @change="refreshCode()"></s-identify>
          （点击刷新）
        </div>
        <div style="margin: 16px;">
          <van-button round
                      block
                      type="info"
                      native-type="submit"
                      @click="Register">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import SIdentify from '../utils/Sldentify.vue'
import { register } from '@/api/login'
export default {
  components: { SIdentify },
  data () {
    return {
      identifyCode: '',
      userInfo: {
        icon: '',
        uid: '',
        password: '',
        confirm_password: '',
        email: ''
      },
      Vcode: ''
    }
  },
  created () {
    this.refreshCode()
  },
  methods: {
    // 验证码
    refreshCode () {
      const identifyCodes = '0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ'
      this.identifyCode = ''
      this.makeCode(identifyCodes, 4)
    },
    randomNum (min, max) {
      max = max + 1
      return Math.floor(Math.random() * (max - min) + min)
    },
    makeCode (data, len) {
      for (let i = 0; i < len; i++) {
        this.identifyCode += data[this.randomNum(0, data.length - 1)]
      }
    },
    // 头像上传成功回调
    handleAvatarSuccess (file) {
      this.userInfo.icon = file.filename
    },
    // 表单验证
    Emailvalidator (val) {
      return val ? /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val) : true
    },
    validator (val) {
      if (!val) {
        return false
      }
    },
    onFailed () {
      this.$toast.fail('请正确填写所有必填信息')
    },
    // 注册
    async Register () {
      if (this.Vcode.toLowerCase() !== this.identifyCode.toLowerCase()) {
        this.refreshCode()
        return this.$toast.fail('验证码输入错误')
      } else if (this.userInfo.confirm_password !== this.userInfo.password) {
        return this.$toast.fail('两次密码输入不一致')
      }
      const { icon, uid, password, email } = this.userInfo
      register(icon, uid, password, email).then(() => {
        this.$toast.success('注册成功，为您跳转到登录页面')
      }).then(() => {
        setTimeout(() => {
          this.$router.push('/login')
        }, 1000)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.contrain {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 15px;
  .Vcode {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .head {
    margin-top: 20%;
    span {
      font-size: 24px;
    }
  }
  .main {
    margin-top: 15px;
    .van-form {
      margin-top: 20px;
    }
  }
  .btn {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    p {
      margin-top: 15px;
      align-self: center;
    }
  }
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 130px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}
.avatar {
  width: 130px;
  height: 130px;
  display: block;
}
</style >
